<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">
		<cpn :cmovies="movies" :cmessage="message"></cpn>
	</div>

	<template id="cpn">
		<div>
			<ul>
				<li v-for="item in cmovies">{{item}}</li>
			</ul>
			<div>{{cmessage}}</div>
		</div>
	</template>

</body>
<script type="text/javascript">
	//父向子:props
	const cpn = {
		template: '#cpn',
		// props: ['cmovies', 'cmessage'],
		props:{
			// cmovies:Array,
			// cmessage:String
			cmessage: {
				type: String,
				default: 'aaa',
				required: true
			},
			cmovies: {
				type: Array,
				//default: [],
				default() {
					return []
				},
				required: true
			}
		},
		data() {
			return{

			}
		},
		methods:{

		}
	}

	const app = new Vue({
		el: '#app',
		data: {
			message: '你好',
			movies: ['海王', '海贼王', '火影', '哥斯拉'],
		},
		components: {
			cpn
		}
	})
</script>

</html>